{% extends "base.html" %}
{% block title %}{% if id %}修改{% else %}添加新{% endif %}文章{% endblock %}
{% block css %}
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.2/build/assets/skins/sam/skin.css" />
{% endblock %}
{% block js %}
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.2/build/menu/assets/skins/sam/menu.css" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.2/build/button/assets/skins/sam/button.css" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.2/build/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.2/build/container/assets/skins/sam/container.css" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.2/build/editor/assets/skins/sam/editor.css" />
<link rel="stylesheet" type="text/css" href="/static/css/editor.css" />
<script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/element/element-beta-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/container/container-min.js"></script>
<script src="http://yui.yahooapis.com/2.5.2/build/menu/menu-min.js"></script>
<script src="http://yui.yahooapis.com/2.5.2/build/button/button-min.js"></script>
<script src="http://yui.yahooapis.com/2.5.2/build/editor/editor-beta-min.js"></script> 
<script type="text/javascript">
    var Dom = YAHOO.util.Dom, 
    Event = YAHOO.util.Event;
    var myConfig = {
        height: '300px',
        width: '100%',
        animate: true,
        dompath: true,
        focusAtStart: true
    };
    var state = 'off';
    YAHOO.log('Set state to off..', 'info', 'example');
    YAHOO.log('Create the Editor..', 'info', 'example');
    var myEditor = new YAHOO.widget.Editor('id_content',myConfig);

    YAHOO.util.Event.onAvailable('codeInsert', function() {
        YAHOO.util.Event.on('codeInsert', 'click', function(ev) {
            var t = document.getElementById('codeType');
            if(t.value) { type = t.value; }
            var b = document.getElementById('codeBody');
            if(b.value) { body = b.value; }

            if (type && body) {
                var _button = this.toolbar.getButtonByValue('insertcode');
                _button._menu.hide();
                myEditor.toolbar.fireEvent('insertcodeClick', { type: 'insertcodeClick', codeType: type, codeBody: body});
            }
            YAHOO.util.Event.stopEvent(ev);
        }, myEditor, true);
    });

    myEditor.on('toolbarLoaded', function() {
        var codeConfig = {
            type: 'push', label: 'Edit HTML Code', value: 'editcode'
        };
        var syntaxHighlighter = {
            type: 'push', 
            label: 'Insert Source Code', 
            value: 'insertcode',
            menu: function() {
                //Create the Overlay instance we are going to use for the menu            
                var menu = new YAHOO.widget.Overlay('inserticon', {
                    width: '165px',
                    height: '210px',
                    visible: false
                });
		var type = ["css", "java","javascript","php", "python","sql"];
                var str = 'Type: <select id="codeType" style="width:100px">';
                for (var i = 0; i < type.length; i++) {
		    str += '<option value="'+type[i]+'" >'+type[i]+'</option>';
                }
		str += '</select>';
		str += '<textarea id="codeBody" style="width:300px;height:200px;"></textarea>';
		str += '<button id="codeInsert">Insert Your Code</button>';
                //Setting the body of the container.
                menu.setBody('<div id="codeMenu">' + str + '</div>');
                menu.beforeShowEvent.subscribe(function() {
                    //Set the context to the bottom left corner of the Insert Icon button  
                    menu.cfg.setProperty('context', [
                        myEditor.toolbar.getButtonByValue('insertcode').get('element'),
                        'tl',
                        'bl'
                    ]);
                });			
                menu.render(document.body);
                menu.element.style.visibility = 'hidden';
                //return the Overlay instance here                
                return menu;
            }()
        };
        YAHOO.log('Create the (editcode) Button', 'info', 'example');
        this.toolbar.addButtonToGroup(codeConfig, 'insertitem');
        this.toolbar.addButtonToGroup(syntaxHighlighter, 'insertitem');

        this.toolbar.on('editcodeClick', function() {
            var ta = this.get('element'),
                iframe = this.get('iframe').get('element');

            if (state == 'on') {
                state = 'off';
                this.toolbar.set('disabled', false);
                YAHOO.log('Show the Editor', 'info', 'example');
                YAHOO.log('Inject the HTML from the textarea into the editor', 'info', 'example');
                this.setEditorHTML(ta.value);
                if (!this.browser.ie) {
                    this._setDesignMode('on');
                }

                Dom.removeClass(iframe, 'editor-hidden');
                Dom.addClass(ta, 'editor-hidden');
                this.show();
                this._focusWindow();
            } else {
                state = 'on';
                YAHOO.log('Show the Code Editor', 'info', 'example');
                this.cleanHTML();
                YAHOO.log('Save the Editors HTML', 'info', 'example');
                Dom.addClass(iframe, 'editor-hidden');
                Dom.removeClass(ta, 'editor-hidden');
                this.toolbar.set('disabled', true);
                this.toolbar.getButtonByValue('editcode').set('disabled', false);
                this.toolbar.selectButton('editcode');
                this.dompath.innerHTML = 'Editing HTML Code';
                this.hide();
            }
            return false;
        }, this, true);

	this.toolbar.on('insertcodeClick', function(ev) {
            var type = '';
	    var body = '';
            if (ev.codeType) {
                type = ev.codeType;
            }
	    if (ev.codeBody) {
		body = ev.codeBody;
	    }
            myEditor._focusWindow();
	    var str = '<pre name="code" class="'+type+'">'+body+'</pre>';
	    myEditor.execCommand('inserthtml', str);
	});
        
        this.on('cleanHTML', function(ev) {
            YAHOO.log('cleanHTML callback fired..', 'info', 'example');
            this.get('element').value = ev.html;
        }, this, true);
        
        this.on('afterRender', function() {
            var wrapper = this.get('editor_wrapper');
            wrapper.appendChild(this.get('element'));
            this.setStyle('width', '100%');
            this.setStyle('height', '100%');
            this.setStyle('visibility', '');
            this.setStyle('top', '');
            this.setStyle('left', '');
            this.setStyle('position', '');

            this.addClass('editor-hidden');
        }, this, true);
    }, myEditor, true);
   
    myEditor.render();
    
    function submitForm(){
        document.mainForm.id_content.value = myEditor.saveHTML();
        document.mainForm.submit();
    }
</script>
{% endblock %}
{% block content %}
<div class="block">
	<h1 class="header">{% if id %}修改{% else %}添加新{% endif %}文章</h1>
	<form name="mainForm" method="post" action="" onsubmit="submitForm();">
		{{form.as_p}}
		标签 (以空格分隔) : <input type="text" name="tagsString" id="tags" value="{{tagsString}}">
		<p><input type="submit" value="保存"/></p>
	</form>
</div>
{% endblock %}